<template>
  <el-dialog
    v-model="dialogVisible"
    title="修改模具入库单"
    width="1100px"
    @close="close"
  >
    <el-form label-width="100px" :model="state.moldBillForm">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="入库单号">
            <el-input
              v-model="state.moldBillForm.inBillCode"
              :disabled="true"
              placeholder="自动生成"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采购类型" required>
            <el-select
              v-model="state.moldBillForm.pkMoldInType"
              :disabled="true"
              filterable
              placeholder="请选择采购类型"
              style="width: 100%"
            >
              <el-option
                v-for="item in state.inOutTypeList"
                :key="item.pkInOutType"
                :label="item.typeName"
                :value="item.pkInOutType"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库仓库" required>
            <el-select
              v-model="state.moldBillForm.pkMoldWh"
              :disabled="true"
              filterable
              placeholder="请选择入库仓库"
              style="width: 100%"
            >
              <el-option
                v-for="item in state.moldWarehouseList"
                :key="item.pkMoldWh"
                :label="item.wcName"
                :value="item.pkMoldWh"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商" required>
            <!-- :disabled="true" -->
            <el-select
              v-model="state.moldBillForm.pkSupplier"
              filterable
              placeholder="请选择供应商"
              style="width: 100%"
            >
              <el-option
                v-for="item in state.supplierList"
                :key="item.pkSupplier"
                :label="item.supplierName"
                :value="item.pkSupplier"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="state.moldBillForm.remark" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" @click="toSelectMold">新增</el-button>
    <div style="height: 12px"></div>
    <el-table :data="state.moldInBillBs">
      <el-table-column label="操作" width="80px">
        <template #default="scope">
          <el-button text type="danger" @click="toDelete(scope)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="模具">
        <template #default="scope">
          <div style="font-size: 14px; font-weight: 500; color: #333">
            <span style="font-size: 12px; font-weight: 400; color: #666">
              {{ scope.row.moldCode }}
            </span>
            {{ scope.row.moldName }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="批号">
        <template #default="scope">
          <el-input
            v-model="scope.row.moldBatch"
            placeholder="请输入批号"
            @change="(e) => columnChange(scope, 'moldBatch', e)"
          />
        </template>
      </el-table-column>

      <el-table-column label="数量">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.qty"
            :controls="false"
            :min="0"
            placeholder="请输入数量"
            :precision="0"
            @change="(e) => columnChange(scope, 'qty', e)"
          />
        </template>
      </el-table-column>
    </el-table>
    <SelectMoldDialog
      ref="SelectMoldDialogRef"
      @select-mold-callback="selectMoldCallback"
    />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
  import {
    getMoldWhPageApi,
    getInoutTypeApi,
    getInBillBApi,
    updateInbillApi,
  } from '@/api/equip/mold_api'
  import { getSupplierPageApi } from '@/api/base/supplier'
  // import SelectSupplierDialog from './SelectSupplierDialog.vue'
  import SelectMoldDialog from './SelectMoldDialog.vue'
  import { localStorageConfig } from '@/config/localstorage.config'

  const dialogVisible = ref(false),
    SelectMoldDialogRef = ref(),
    pkCorp = localStorage.getItem(localStorageConfig.__pkCorp),
    $baseMessage = inject('$baseMessage')
  const state = reactive({
    moldBillForm: {},
    moldWarehouseList: [],
    inOutTypeList: [],
    supplierList: [],
    moldInBillBs: [],
    deleteBillBs: [],
  })
  onMounted(() => {
    queryWarehouse()
    queryInoutType()
    querySupplier()
  })
  const close = () => {}
  const toSelectMold = () => {
    SelectMoldDialogRef.value.handleOpen()
  }
  const columnChange = (scope) => {
    if (scope.row.pkInBillB) {
      scope.row['action'] = '0'
      console.log(state.moldInBillBs)
    }
  }
  const toDelete = (scope) => {
    const $index = scope.$index
    const m = state.moldInBillBs.splice($index, 1)[0]
    if (m.pkInBillB) {
      state.deleteBillBs.push({ ..._.clone(m), action: '2' })
    }
    console.log('state.moldInBillBs', state.moldInBillBs)
    console.log('state.deleteBillBs', state.deleteBillBs)
  }

  const save = async () => {
    const params = {
      ...state.moldBillForm,
      pkCorp,
      moldInBillBs: [
        ...(state.moldInBillBs || []),
        ...(state.deleteBillBs || []),
      ],
    }

    const { msg } = await updateInbillApi(params)
    dialogVisible.value = false
    $baseMessage(msg ? msg : '操作成功')
    _emits('saveCallback')
  }

  const selectMoldCallback = (moldItem) => {
    state.moldInBillBs.push({
      action: '1',
      ...moldItem,
      qty: 1,
      moldBatch: '',
    })
  }

  const queryWarehouse = async () => {
    const { data } = await getMoldWhPageApi({
      pkCorp,
      pageNum: 1,
      pageSize: 10000,
    })
    state.moldWarehouseList = data?.list || []
  }

  const queryInoutType = async () => {
    const { data } = await getInoutTypeApi({ inOutType: '0' })
    state.inOutTypeList = data
    console.log('queryInoutType', data)
  }

  const querySupplier = async () => {
    const { data } = await getSupplierPageApi({
      moldSupp: 1,
      pkCorp,
      pageNum: 1,
      pageSize: 10000,
    })
    state.supplierList = data?.list || []
    console.log('querySupplier', data)
  }
  const queryBodyData = async (pkInBillH) => {
    const { data } = await getInBillBApi({ pkInBillH })
    state.moldInBillBs = data
  }
  defineExpose({
    handleOpen: (rowData) => {
      if (!rowData) return
      console.log('rowData', rowData)
      queryBodyData(rowData.pkInBillH)
      state.moldBillForm = {
        ...(rowData || {}),
      }
      dialogVisible.value = true
    },
  })
  const _emits = defineEmits('saveCallback')
</script>
